<!--
 * @Author: your name
 * @Date: 2022-04-02 11:01:01
 * @LastEditTime: 2022-04-02 11:04:04
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \geyao\geyao\常见面试题对BFC的一些理解220402.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BFC理解</title>
</head>

<body>
  <script>
    // BFC 即块级格式上下文， 根据盒模型可知， 每个元素都被定义为一个矩形盒子， 然而盒子的布局会受到尺寸， 定位， 盒子的子元素或兄弟元素， 视口的尺寸等因素决定， 所以这里有一个浏览器计算的过程， 计算的规则就是由一个叫做视觉格式化模型的东西所定义的， BFC 就是来自这个概念， 它是 CSS 视觉渲染的一部分， 用于决定块级盒的布局及浮动相互影响范围的一个区域。
    // BFC 具有一些特性：

    // 块级元素会在垂直方向一个接一个的排列， 和文档流的排列方式一致。
    // 在 BFC 中上下相邻的两个容器的 margin 会重叠， 创建新的 BFC 可以避免外边距重叠。
    // 计算 BFC 的高度时， 需要计算浮动元素的高度。
    // BFC 区域不会与浮动的容器发生重叠。
    // BFC 是独立的容器， 容器内部元素不会影响外部元素。
    // 每个元素的左 margin 值和容器的左 border 相接触。

    // 利用这些特性， 我们可以解决以下问题：

    // 利用 4 和 6， 我们可以实现三栏（ 或两栏） 自适应布局。
    // 利用 2， 我们可以避免 margin 重叠问题。
    // 利用 3， 我们可以避免高度塌陷。

    // 创建 BFC 的方式：

    // 绝对定位元素（ position 为 absolute 或 fixed）。
    // 行内块元素， 即 display 为 inline - block。
    // overflow 的值不为 visible。
  </script>
</body>

</html>